/**
 * for developement only. to publish create a CSS file with the 
 * compiled styles
 */
body {
  font-size: 14px;
  font-family: "Myriad Pro", Myriad, sans-serif;
  font-weight: 100;
  color: #fafafa;
  line-height: 1.68; }

.clear:after {
  content: ".";
  display: block;
  height: 1px;
  line-height: 1px;
  visibility: hidden;
  clear: both; }

img.alignleft {
  float: left;
  margin-right: 14px;
  margin-bottom: 14px; }

html {
  width: 100%;
  height: 100%; }

body {
  background: #323232 url("/themes/tsgdesign/images/wall-texture.gif") repeat;
  margin: 0;
  padding-top: 14px;
  padding-bottom: 14px; }

ins {
  background-color: #bfff80; }

a {
  color: #8cbe6e;
  font-weight: 100; }
  a:active {
    color: white; }
  a:visited {
    color: #8cbe6e; }
  a:hover {
    color: white;
    -o-transition: all 0.5s ease 0;
    -moz-transition: all 0.5s ease 0;
    -webkit-transition: all 0.5s ease 0;
    transition: all 0.5s ease 0; }

aside {
  width: 33%; }
  aside, aside.right {
    float: right;
    margin: 0 0 14px 14px; }
  aside.left {
    float: left;
    margin: 0 14px 14px 0; }

figure.alignleft {
  float: left;
  margin: 0 14px 14px 0; }
figure.alignright {
  float: right;
  margin: 0 0 14px 14px; }
figure figcaption {
  font-size: 12.25px; }

h1, h2, h3, h4, h5, h6 {
  font-family: serif;
  margin: 0.5em 0; }

h1 {
  font-size: 2.25em;
  color: #8cbe6e; }

h2 {
  font-size: 2.00em;
  color: #465f37; }

h3 {
  font-size: 1.75em;
  color: #2e3f24; }

h4 {
  font-size: 1.50em;
  color: #161e12; }

h5 {
  font-size: 1.25em;
  color: #161e12; }

h6 {
  font-size: 1.00em;
  color: #161e12; }

h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  font-size: 1em; }

hgroup {
  margin: 2em 0; }
  hgroup * {
    margin: 0; }

p,
dl,
li {
  font-size: 14px; }
  p *,
  dl *,
  li * {
    font-size: 1em; }

li * {
  font-size: 0.875em; }
  li * * {
    font-size: 1em; }

dl dt {
  font-weight: bold;
  margin-top: 0.5em; }

article footer {
  font-size: 0.875em;
  color: white; }

footer#footer {
  border-top: 1px solid #8cbe6e;
  margin-top: 2em;
  padding-top: 2em;
  padding: 7px 5%;
  color: #b2b2b2; }

#content {
  width: 97%;
  margin: 0 auto; }

#content #paper {
  padding: 2.5em 10%; }

header#header:before {
  display: block;
  position: absolute;
  top: 0;
  height: 14px;
  width: 100%;
  content: ' ';
  background: #465f37;
  background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #8cbe6e), color-stop(1, #232d19));
  background: -ms-linear-gradient(left, #8cbe6e, #232d19);
  background: -moz-linear-gradient(0deg, #8cbe6e 0%, #232d19 100%); }
header#header:after {
  content: '.';
  height: 0;
  clear: both;
  display: block;
  visibility: hidden; }

#identity {
  margin: 1.25em auto;
  text-align: center; }
  #identity a.logo {
    background-image: url("/themes/tsgdesign/images/byTylerGordon.png");
    background-repeat: none;
    width: 200px;
    height: 60px;
    display: block;
    overflow: hidden;
    margin: 0 auto; }

.svg #identity a {
  background-image: url("/themes/tsgdesign/images/byTylerGordon.svg");
  width: 300px;
  height: 90px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

#search {
  margin: 16px auto;
  padding: 0 10%;
  text-align: center; }
  #search input {
    line-height: 1.125;
    font-size: 14px;
    padding: 7px 14px;
    outline: 0;
    border: 1px solid #787878; }
  #search input.searchbox {
    width: 50%;
    margin: 0 auto; }

#socialMe {
  list-style-type: none;
  text-align: center; }
  #socialMe li {
    display: inline; }
    #socialMe li a {
      text-decoration: none;
      padding: 0 3.5px; }

/*
--------------------
Navigation
--------------------
  <nav id="main" class="menu">
    <ul class="menu">
      <li>
        <a href="URL">Label</a>
      </li>
    </ul>
  </nav>
*/
nav#main {
  margin: 0 auto;
  text-align: center;
  padding-right: 56px; }
  nav#main ul {
    list-style: inside none;
    margin: 28px 0; }
    nav#main ul li {
      display: inline;
      padding: 0 4.66667px; }
  nav#main a {
    font-size: 14px;
    font-weight: 100;
    padding: 14px 28px;
    text-decoration: none;
    color: #fafafa;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    background: fade(#8cbe6e, 10%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #43662e), color-stop(1, #8cbe6e));
    background: -ms-linear-gradient(bottom, #43662e, #8cbe6e);
    background: -moz-linear-gradient(center bottom, #43662e 0%, #8cbe6e 100%); }
    nav#main a.active {
      color: #465f37;
      background: fade(#8cbe6e, 20%);
      background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #659a45), color-stop(1, #b6d6a3));
      background: -ms-linear-gradient(bottom, #659a45, #b6d6a3);
      background: -moz-linear-gradient(center bottom, #659a45 0%, #b6d6a3 100%); }
  nav#main a:active {
    color: #465f37; }
  nav#main a:hover {
    color: #232d19;
    background-color: #8cbe6e;
    background: fade(#8cbe6e, 10%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #71ac4d), color-stop(1, #c4deb4));
    background: -ms-linear-gradient(bottom, #71ac4d, #c4deb4);
    background: -moz-linear-gradient(center bottom, #71ac4d 0%, #c4deb4 100%); }

footer nav.menu a,
footer nav.menu a:link,
footer nav.menu a:active,
footer nav.menu a:visited {
  text-decoration: none; }
footer nav.menu ul {
  height: auto; }
  footer nav.menu ul li {
    display: block;
    padding: .125em 0;
    font-size: 0.875em;
    font-family: serif;
    line-height: inherit;
    border-right: 0 none; }
    footer nav.menu ul li a {
      color: #465f37; }
    footer nav.menu ul li:hover a {
      color: #161e12; }
    footer nav.menu ul li:hover ul {
      display: none; }

/*
--------------------
Blog list layout
--------------------
<section id="blog">

  <article>
    <footer>
      <p>
        <time class="month">Month</time><br>
        <time class="day">Day</time>
      </p>
    </footer>
    <div>
      <h1><a href="URL">Label</a></h1>
      <p>Content</p>
    </div>
  </article>

  <footer>
    <p style="clear: both;"><a href="FeedURL"><img src="FeedImage" alt="Subscribe"> Subscribe</a></p>
  </footer>

</section>
  
*/
section#blog article {
  border-bottom: 1px solid #8cbe6e;
  padding-top: 14px;
  padding-bottom: 14px; }
  section#blog article footer {
    float: left;
    width: 42px; }
    section#blog article footer p {
      text-align: right;
      line-height: 1; }
      section#blog article footer p time.month {
        font-weight: bold; }
  section#blog article > div {
    margin-left: 56px; }
  section#blog article h1 {
    margin: 0; }
    section#blog article h1 a {
      color: #8cbe6e;
      text-decoration: none; }
    section#blog article h1 a:hover {
      color: #465f37; }
  section#blog article p {
    margin: 0; }
